<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> json with padding </title>
</head>
<body>
    <button type="button" onclick="jsonpRequest" >数据请求</button>
</body>
</html>
<script>
    //21-07-15夜 修订
// jsonp是：
    //jsonp是服务器与客户端跨源通信的常用方式
    //特点：简单适用，兼容性好(低版本ie)，缺点只支持get请求(往页面里添加一个script标签，通过src属性触发对指定的地址请求，故只能是get请求)
    //不支持post请求          

// jsonp实现原理：
    //主要是利用动态创建script标签请求后端接口地址，
    //然后传递callback参数，后端接收callback，后端经过数据处理，
    //返回callback函数调用的形式，callback中的参数就是json

// jsonp核心思想
    //网页通过一个<script>元素，向服务器请求json数据
    //服务器收到请求后，将数据放到一个指定的回调函数的参数位置传回来 

//原生实现的
    var script = document.createElement("script");
    script.type = "text/javascritp";
        //传入一个回调函数名给后端 方便后端返回时执行这个在前端定义的回调函数 
    script.src = "http://www.domain2.com:8080/login?user=admin&callback=handleCallback";
    document.head.appendChild(script);
        //执行回调函数  
    function handleCallback(res){
        console.log(JSON.stringify(res))
    }    
        //服务器端返回如下 (返回时即执行全局函数)
    handleCallback({"status":true,"user":"admin"})            

//jq实现的 
    $.ajax({
        url:"http://www.domain2.com:8080/login",
        type:"get",
        dataType:"jsonp",  //请求方式魏json
        jsonpCallback:"handleCallback",
                           //自定义回调函数名字 
        data:{}                   
    })

//vue实现的 
    this.$http.jsonp("http://www.domain2.com:8080/login",
    {
        params:{},
        jsonp:"handleCallback"
    }).then((res)=>{
        console.log(res)
    })
//包括node.js 实现 






</script>